<h2>Menu Bar</h2>
<hr/>

<div id="menubar_t" class="menubar"></div>
<form>
<input type="text"><select><option>1</option></select>
</form>
<style>
div.menubar {
	background-color:#99cc33;
	margin-left:-8px;
	margin-right:-8px;
	font-weight:bold;
	font-size:13px;
        padding:4px 10px;
	font-family:Arial,Helvetica,Geneva,sans-serif;
}
.menubar_item {border-left:1px solid yellow;border-right:1px solid yellow;padding:1px 23px;}
.submenu {
              position:absolute; 
	      width:220px;
              background-color:#c6e896; 
              visibility:hidden; 
	      border:1px solid silver;
		     padding-top:6px;
		     padding-bottom:6px;
}


.menu_item    {
              cursor:pointer; 
              border-top:1px solid #efefef;
	      font-size:13px;
              padding-left:10px; 
              padding-top:3px; 
              color:black; 
              background-color:#c6e896; 
	      font-family:Arial,Helvetica,Geneva,sans-serif;
             }
.menu_item_over  {
              cursor:pointer; 
              border-bottom:1px solid #505050; 
	      font-size:13px;
              border-top:1px solid #efefef;
              padding-left:10px; 
              padding-top:3px; 
              color:#0099ff; 
              background-color:#f1fae3; 
             }
.menu_item a       {color:blue;text-decoration:none;}
.menu_item_over a  {color:red;text-decoration:underline;}
</style>

<script>

function get_object_offset(obj){
    var selp = obj;
    var	selx=0, sely=0; 
    while(selp){
    	selx+=selp.offsetLeft;
    	sely+=selp.offsetTop;
    	selp=selp.offsetParent;
    }
    return {x:selx, y:sely, w:obj.offsetWidth, h:obj.offsetHeight};
}

function display_select_in( flag, x, y, w, h){
    var sel=document.getElementsByTagName("SELECT")
    for(var i=0;i<sel.length;i++){
    	var selx=0, sely=0;
	var offset = get_object_offset(sel[i]);
	selx = offset.x;
	sely = offset.y;
    	selw = offset.w;
    	selh = offset.h;
	if(selx+selw>x && selx<x+w && sely+selh>y && sely<y+h){
    	    sel[i].style.visibility= flag?"visible":"hidden";
	}
    }
}


// global menu state
var menuReady = false;


// specifications for menu contents and menubar image associations
var menus = [
    {
     text:"Menu 1",
     href:"",
     menuItems:[  ]
    },
    {
     text:"Menu 2",
     href:"#",
     menuItems:[ {text:"Deluxe Line", href:"catalog_deluxe.html"},
                 {text:"Budget Line", href:"catalog_budget.html"},
                 {text:"Export", href:"catalog_export.html"},
                 {text:"Order Print Catalog", href:"catalog_order.html"}
               ]
    },
    {
     text:"Menu 3",
     href:"#",
     menuItems:[ {text:"Press Releases", href:"press.html"},
                 {text:"Executive Staff", href:"staff.html"},
                 {text:"Map to Our Offices", href:"map.html"},
                 {text:"Company History", href:"history.html"},
                 {text:"Job Postings", href:"jobs.html"},
                 {text:"Contact Us", href:"contact.html"}
               ]
    }
];
  
  
  
// invoked from initMenu( ), generates the menu div elements and their contents.
// all this action is invisible to user during construction
function makeMenus( menubar_id) {
    var menubar = document.getElementById(menubar_id);
    var menuDiv, menuItem, itemLink, mbarImg, textNode, offsetLeft, offsetTop;
    
    
    // use menus array to drive div creation loop
    for (var i = 0; i < menus.length; i++) {
        var menu_item = document.createElement("span");
	menu_item.appendChild(document.createTextNode(menus[i].text));
	menu_item.className = "menubar_item";
        menu_item.onmouseover = swap;
        menu_item.onmouseout = swap;
        menu_item.id = "menubar_item_"+i;
	menubar.appendChild(menu_item);

        var submenu = document.createElement("div");
        submenu.id = "menubar_item_" + i + "_submenu";
        submenu.className = "submenu";
        // TODO: submenu.style.width = "100px";
        submenu.onmouseover = keepMenu;
        submenu.onmouseout = requestHide;
        submenu.style.zIndex = 1000;

        if (menus[i].menuItems.length <= 0) {
            submenu.style.display = "none";
	}

        for (var j = 0; j < menus[i].menuItems.length; j++) {
            var menuItem = document.createElement("div");
            menuItem.id = "popup_submenu_" + i + "_"+j;
            menuItem.className = "menu_item";
            menuItem.onmouseover = toggleHighlight;
            menuItem.onmouseout = toggleHighlight;
            menuItem.onclick = hideMenus;
            var itemLink = document.createElement("a");
            itemLink.href = menus[i].menuItems[j].href;
            textNode = document.createTextNode(menus[i].menuItems[j].text);
            itemLink.appendChild(textNode);
            menuItem.appendChild(itemLink);
            submenu.appendChild(menuItem);
        }
        // append each menu div to the body
        document.body.appendChild(submenu);
    }
    menuReady = true;
}
  
var timer;
  
function keepMenu( ) {
    clearTimeout(timer);
}
  
function cancelAll( ) {
    keepMenu( );
    menuReady = false;
}
  
function requestHide( ) {
    timer = setTimeout("hideMenus( )", 250);
}
  
function hideMenus( ) {
    for (var i = 0; i < menus.length; i++) {
       var submenu_id = "menubar_item_" + i + "_submenu";
       var menu = document.getElementById(submenu_id);
       display_select_in(1,menu.offsetLeft, menu.offsetTop, menu.offsetWidth, menu.offsetHeight);
       menu.style.visibility = "hidden";
    }
}
  
function positionMenu(menuId){
    // use the menu bar image for position reference of related div
    var menu_item = document.getElementById(menuId); 
    //alert(menu_item+":"+menu_item.offsetHeight);
    var offset = get_object_offset(menu_item);
    var offsetLeft = offset.x;
    var offsetTop  = offset.y;

    if (navigator.userAgent.indexOf("Mac") != -1 && 
        typeof document.body.leftMargin != "undefined") {
        offsetLeft += document.body.leftMargin;
        offsetTop += document.body.topMargin;
    }
    var menuDiv = document.getElementById(menuId+"_submenu");
    if(menuDiv){
	    menuDiv.style.left = offsetLeft + "px";
	    menuDiv.style.top = offsetTop + offset.h + "px";
    }
}
  
// display a particular menu div
function showMenu(menuId) {
    if (menuReady) {
        keepMenu( );
        hideMenus( );
        positionMenu(menuId);
        var menu = document.getElementById(menuId+"_submenu");
	display_select_in(0,menu.offsetLeft, menu.offsetTop, menu.offsetWidth, menu.offsetHeight);
        menu.style.visibility = "visible";
    }
}

// swap style sheets for menu items during rollovers
function toggleHighlight(evt) {
    evt = (evt) ? evt : ((event) ? event : null);
    if (typeof menuReady != "undefined") {
        if (menuReady && evt) {
            var elem = (evt.target) ? evt.target : evt.srcElement;
            if (elem.nodeType == 3) {
                elem = elem.parentNode;
            }
	    if(elem.nodeName == "A"){
                elem = elem.parentNode;
	    }
            if (evt.type == "mouseover") {
                keepMenu( );
                elem.className ="menu_item_over";
            } else {
                elem.className ="menu_item";
                requestHide( );
            }
            evt.cancelBubble = true;
        }
    }
}
  
function swap(evt) {
    evt = (evt) ? evt : ((event) ? event : null);
    if (typeof menuReady != "undefined") {
        if (evt && (document.getElementById && document.styleSheets) && menuReady) {
            var elem = (evt.target) ? evt.target : evt.srcElement;
            //if (elem.className == "menuImg") {
                if (evt.type == "mouseover") {
                    showMenu(elem.id);
                } else if (evt.type == "mouseout") {
                    requestHide( );
                }
                evt.cancelBubble = true;
            //}
        }
    }
}
  

menus = [
    { text:"Home", href:"#",
    	menuItems:[]
    }, 
    { text:"Resource", href:"#", 
       menuItems:[
            { text: "PV Home", href:"http://wwwin/pv" },
            { text: "CRM Info", href:"http://wwwin/crminfo" },
            { text: "Testing Binary", href:"http://wwwin/~pds/index.php?load=all_images.inc" },
            { text: "PV Shanghai Library", href:"http://wwwin/pv/shanghai/library/book.cgi" },
            { text: "PV-Opt Team XWiki", href:"http://wwwin/~szhang/xwiki" }
        ]
    },
    {text:"Edit", href:"#",
       menuItems:[
            { text: "Create New Project", href: "http://wwwin/pv/pms/develop/prj.cgi?mode=dlg&dlg=prjnew_dlg" }
        ]
    },
    {text:"View", href:"#",
       menuItems:[
        //- { text: "Latest Updated Projects", href: "http://wwwin/pv/pms/develop/prj.cgi?mode=prjactive" },
            { text: "Project Overview", href: "http://wwwin/pv/pms/develop/prj.cgi?mode=prjlist" },
            { text: "Project Overview By Area", href: "http://wwwin/pv/pms/develop/prj.cgi?mode=prjtree" }
        ]
    }
];

//makeMenus('menubar_t');
makeMenus('menubar_t');
</script>

